@import './reset.less';
@import './variables.less';

@px10: 10px;
@px20: 20px;
@px30: 30px;
@px40: 40px;

.mr10 {
  margin-right: @px10;
}

.mt10 {
  margin-top: @px10;
}

.ml10 {
  margin-left: @px10;
}

.mb10 {
  margin-bottom: @px10;
}

.mr20 {
  margin-right: @px20;
}

.mt20 {
  margin-top: @px20;
}

.ml20 {
  margin-left: @px20;
}

.mb20 {
  margin-bottom: @px20;
}

.mr20 {
  margin-right: @px20;
}

.mt30 {
  margin-top: @px30;
}

.ml30 {
  margin-left: @px30;
}

.mb30 {
  margin-bottom: @px30;
}

/* ========= padding ==============*/

.pr10 {
  padding-right: @px10;
}

.pt10 {
  padding-top: @px10;
}

.pl10 {
  padding-left: @px10;
}

.pb10 {
  padding-bottom: @px10;
}

.pr20 {
  padding-right: @px20;
}

.pt20 {
  padding-top: @px20;
}

.pl20 {
  padding-left: @px20;
}

.pb20 {
  padding-bottom: @px20;
}

.pr20 {
  padding-right: @px20;
}

.p30 {
  padding: 30px;
}

.pt30 {
  padding-top: @px30;
}

.pl30 {
  padding-left: @px30;
}

.pb30 {
  padding-bottom: @px30;
}

.pr30 {
  padding-right: @px30;
}

.flex1 {
  flex: 1;
}

.row {
  display: flex;
  align-items: center;
}